<!DOCTYPE html>
<html lang="en">
    
    <head>
        <title>Lesson - Lesson Page | Tut-Tutoring</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/colorbox.css" />
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/cufon-yui.js"></script>
        <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script>
        <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script>
        <script type="text/javascript" src="js/cufon-replace.js"></script>
        <script type="text/javascript" src="js/roundabout.js"></script>
        <script type="text/javascript" src="js/roundabout_shapes.js"></script>
        <script type="text/javascript" src="js/gallery_init.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.colorbox.js"></script>
        <script>
            $(document).ready(function () {

                $(".inline").colorbox({
                    inline: true,
                    width: "50%"
                });
                $(".callbacks").colorbox({
                    onOpen: function () {
                        alert('onOpen: colorbox is about to open');
                    },
                    onLoad: function () {
                        alert('onLoad: colorbox has started to load the targeted content');
                    },
                    onComplete: function () {
                        alert('onComplete: colorbox has displayed the loaded content');
                    },
                    onCleanup: function () {
                        alert('onCleanup: colorbox has begun the close process');
                    },
                    onClosed: function () {
                        alert('onClosed: colorbox has completely closed');
                    }
                });

                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function () {
                    $('#click').css({
                        "background-color": "#f00",
                        "color": "#fff",
                        "cursor": "inherit"
                    }).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>
        <!--[if lt IE 7]>
            <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all">
        <![endif]-->
        <!--[if lt IE 9]>
            <script type="text/javascript" src="js/html5.js"></script>
            <script type="text/javascript" src="js/IE9.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <!-- header -->
        <header>
            <div class="container">
                <h1>
                    <a href="index.html">Tut-Tutoring</a>
                </h1>
                <nav>
                    <ul>
                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="lesson.html" class="current">Lesson</a>
                        </li>
                        <li>
                            <a href="gallery.html">Gallery</a>
                        </li>
                        <li>
                           <a class='inline' href="#inline_content">Edit Details</a>
                        </li>
                        <li>
                            <a href="index.html">Logout</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- #gallery -->
        <section id="gallery">
            <div class="container">
                <ul id="myRoundabout">
                    <li>
                        <img src="images/demo.png" alt="">
                    </li>
                </ul>
            </div>
        </section>
        <!-- /#gallery -->
        <div class="main-box">
            <div class="container">
                <div class="inside">
                    <div class="wrapper">
                        <!-- aside -->
                        <aside>
                            <h2>Choose
                                <span>Category</span>
                            </h2>
                            <div class="clear"></div>
                            <ul class="container_aside">
                                <li class="menu">
                                    <ul>
                                        <li class="button">
                                            <a href="#" class="green">Beginners <span></span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu">
                                    <ul>
                                        <li class="button">
                                            <a href="#" class="red">Intermediate <span></span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu">
                                    <ul>
                                        <li class="button">
                                            <a href="#" class="blue">Advanced <span></span></a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </aside>
                        <!-- content -->
                        <section id="content">
                            <article>
                                <h2>Select
                                    <span>Your Lesson</span>
                                </h2>
                                <!-- .team-list -->
                                <ul class="cat-list">
                                    <li>
                                        <figure>
                                            <img src="images/img2.png" alt="">
                                        </figure>
                                        <h3>
                                            <a href="individ_lesson.html">first song</a>
                                        </h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
                                        <br
                                        />by &raquo;
                                        <a href="#">author</a>
                                    </li>
                                    <li>
                                        <figure>
                                            <img src="images/img3.png" alt="">
                                        </figure>
                                        <h3>
                                            <a href="#">Second Song</a>
                                        </h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
                                        <br
                                        />by &raquo;
                                        <a href="#">author</a>
                                    </li>
                                    <li>
                                        <figure>
                                            <img src="images/img4.png" alt="">
                                        </figure>
                                        <h3>
                                            <a href="#">Third Song</a>
                                        </h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
                                        <br
                                        />by &raquo;
                                        <a href="#">author</a>
                                    </li>
                                </ul>
                                <!-- /.team-list -->
                            </article>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        <!-- This contains the hidden content for inline calls -->
        <div style='display:none'>
            <div class="img_modal" id='inline_content' style='padding:10px;'>
                <h2>Edit Details</h2>
                <ul>
                    <li>
                        <input style="padding-bottom:5px" value="" id="user_login" name="user[login]"
                        placeholder="username" size="30" type="text" required>
                    </li>
                    <li>
                        <input value="" id="user_login" name="user[login]" placeholder="password"
                        size="30" type="text" required >
                    </li>
                    <li class="button">
                        <input type="hidden" name="option" value="login" />
                        <input class="button_save" name="commit" value="Save" type="submit">
                    </li>
                </ul>
            </div>
        </div>
        <!-- footer -->
        <footer>
            <div class="container">
                <div class="wrapper">
                    <div class="fleft">Copyright - Tut-Tutoring</div>
                </div>
            </div>
        </footer>
        <script type="text/javascript">
            Cufon.now();
        </script>
    </body>

</html>